<template>
  <div class="clearfix">
    <a-upload
      action="http://localhost:8066/file/upload/goods"
      listType="picture-card"
      :multiple="true"
      :fileList="fileList"
      :beforeUpload="handleBeforeUpload"
      @preview="handlePreview"
      @change="handleChange"
    >
      <div v-if="fileList.length < 8">
        <a-icon type="plus" />
        <div class="ant-upload-text">Upload</div>
      </div>
    </a-upload>
    <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
      <img alt="example" style="width: 100%" :src="previewImage" />
    </a-modal>
  </div>
</template>
<script>
  import { compressImage, getBase64 } from '@/utils/compressImage'

  export default {
    data() {
      return {
        previewVisible: false,
        previewImage: '',
        fileList: []
      };
    },
    methods: {
      handleCancel() {
        this.previewVisible = false;
      },
      handleBeforeUpload(file) {
        return new Promise((resolve, reject) => {
          const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
          if (!isJpgOrPng) {
            this.$notification['error']({
              message: '提示',
              description: `只能上传图片`,
              duration: 3
            })
          }
          const isLt2M = file.size / 1024 / 1024 < 20;
          if (!isLt2M) {
            this.$notification['error']({
              message: '提示',
              description: `图片必须小于20M`,
              duration: 8
            })
            return resolve(false)
          }
          console.log('file size', file.size)
          compressImage(file).then(res => {
            console.log('fileNew size', res.size)
            return resolve(res)
          })
        });
      },
      async handlePreview(file) {
        if (!file.url && !file.preview) {
          file.preview = await getBase64(file.originFileObj);
        }
        this.previewImage = file.url || file.preview;
        this.previewVisible = true;
      },
      handleChange(info) {
        const { file, fileList } = info;
        this.fileList = fileList;
        if (file.status === 'done') {
          this.$notification['success']({
            message: '提示',
            description: `${file.name} 上传成功`,
            duration: 8
          })
        } else if (file.status === 'error') {
          this.$notification['error']({
            message: '提示',
            description: `${file.name} 上传失败`,
            duration: 8
          })
          // for(let item of this.fileList) {
          //   // 错误图片去除缩略略图
          //   if(item.status === 'error') {
          //     item.thumbUrl = '';
          //   }
          // }
        }
      }
    }
  };
</script>
<style>
  /* you can make up upload button and sample style by using stylesheets */
  .ant-upload-select-picture-card i {
    font-size: 32px;
    color: #999;
  }

  .ant-upload-select-picture-card .ant-upload-text {
    margin-top: 8px;
    color: #666;
  }
</style>
